<template>
  <div id="index">
    <div class="active"></div>
    <div class="active"></div>
    <div class="active"></div>
    <div class="box">
      <div class="boxL">
        <div
          ref="main"
          id="main"
          style="width: 700px; height: 380px; margin-bottom: 50px;margin-top:50px"
        ></div>
        <div ref="bin" id="bin" style="width:700px; height: 400px"></div>
      </div>
      <div class="boxR">
        <div ref="zhuzhuang" id="zhuzhuang" style="width:650px;margin-bottom: 50px;;margin-top:50px;height:380px"></div>
        <div ref="liu" id="liu" style="width:650px;height:400px"></div>
      </div>
    </div>
  </div>
</template>
<script>
import * as echarts from "echarts";
export default {
  data() {
    return {};
  },
  methods: {
    PieChart: function () {
      var myCharts = echarts.init(this.$refs.bin);

      var img =
        "";

      var trafficWay = [
        {
          name: "正常",
          value: 14294,
        },
        {
          name: "报警",
          value: 314,
        },
        {
          name: "离线",
          value: 5137,
        },
        {
          name: "故障",
          value: 245,
        },
      ];

      var data = [];
      var color = [
        "#00ffff",
        "#409B5C",
        "#006ced",
        "#ffe000",
        "#ffa800",
        "#ff5b00",
        "#ff3000",
      ];
      for (var i = 0; i < trafficWay.length; i++) {
        data.push(
          {
            value: trafficWay[i].value,
            name: trafficWay[i].name,
            itemStyle: {
              normal: {
                borderWidth: 5,
                shadowBlur: 20,
                borderColor: color[i],
                shadowColor: color[i],
              },
            },
          },
          {
            value: 2,
            name: "",
            itemStyle: {
              normal: {
                label: {
                  show: false,
                },
                labelLine: {
                  show: false,
                },
                color: "rgba(0, 0, 0, 0)",
                borderColor: "rgba(0, 0, 0, 0)",
                borderWidth: 0,
              },
            },
          }
        );
      }
      var seriesOption = [
        {
          name: "",
          type: "pie",
          clockWise: false,
          radius: [105, 109],
          hoverAnimation: false,
          itemStyle: {
            normal: {
              label: {
                show: true,
                position: "outside",
                color: "#ddd",
                formatter: function (params) {
                  var percent = 0;
                  var total = 0;
                  for (var i = 0; i < trafficWay.length; i++) {
                    total += trafficWay[i].value;
                  }
                  percent = ((params.value / total) * 100).toFixed(0);
                  if (params.name !== "") {
                    return (
                      "设备状态：" +
                      params.name +
                      "\n" +
                      "\n" +
                      "占百分比：" +
                      percent +
                      "%"
                    );
                  } else {
                    return "";
                  }
                },
              },
              labelLine: {
                length: 90,
                length2: 50,
                show: true,
                color: "#00ffff",
              },
            },
          },
          data: data,
        },
      ];
      var option = {
        backgroundColor: "rgba(2,13,34,.5)",
        color: color,
        title: {
          text: "设备状态",
          top: "48%",
          textAlign: "center",
          left: "49%",
          textStyle: {
            color: "#fff",
            fontSize: 22,
            fontWeight: "400",
          },
        },
        graphic: {
          elements: [
            {
              type: "image",
              z: 3,
              style: {
                image: img,
                width: 178,
                height: 178,
              },
              left: "center",
              top: "center",
              position: [100, 100],
            },
          ],
        },
        tooltip: {
          show: false,
        },
        legend: {
          icon: "circle",
          orient: "horizontal",
          // x: 'left',
          data: ["正常", "报警", "离线", "故障"],
          right: 410,
          top: 80,
          align: "right",
          textStyle: {
            color: "#fff",
          },
          itemGap: 20,
        },
        toolbox: {
          show: false,
        },
        series: seriesOption,
      };
      myCharts.setOption(option);
    },
    Line: function () {
      var myCharts = echarts.init(this.$refs.main);
      // 统计百分比
      //  折现

      var data1 = [14, 15, 65, 24, 75, 23, 24, 43, 27, 72, 12, 53];
      var data2 = [45, 65, 24, 74, 75, 23, 42, 54, 13, 32, 52, 13];
      var json = {
        chart0: {
          xcategory: [
            "1月",
            "2月",
            "3月",
            "4月",
            "5月",
            "6月",
            "7月",
            "8月",
            "9月",
            "10月",
            "11月",
            "12月",
          ],
          low: data1,
          lowLine: [],
        },
      };
      var json2 = {
        chart0: {
          xcategory: [
            "1月",
            "2月",
            "3月",
            "4月",
            "5月",
            "6月",
            "7月",
            "8月",
            "9月",
            "10月",
            "11月",
            "12月",
          ],
          low: data2,
          lowLine: [],
        },
      };
      var zrUtil = echarts.util;
      zrUtil.each(json.chart0.xcategory, function (item, index) {
        json.chart0.lowLine.push([
          {
            coord: [index, json.chart0.low[index]],
          },
          {
            coord: [index + 1, json.chart0.low[index + 1]],
          },
        ]);
      });
      zrUtil.each(json.chart0.xcategory, function (item, index) {
        json2.chart0.lowLine.push([
          {
            coord: [index, json2.chart0.low[index]],
          },
          {
            coord: [index + 1, json2.chart0.low[index + 1]],
          },
        ]);
      });
      var option = {
        backgroundColor: "rgba(3,6,15,0.3)",
        tooltip: {
          trigger: "axis",
          axisPointer: {
            lineStyle: {
              color: "#15ecf4",
            },
          },
          backgroundColor: "rgba(0,0,0,.8)",
          extraCssText: "box-shadow: 4px 4px 10px rgba(21, 250, 255,.6);",
          formatter: function (params) {
            var result = params[0].name + "<br>";
            params.forEach(function (item) {
              result +=
                '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' +
                item.color +
                '"></span>';
              // 判断设置增长还是降低
              if (parseFloat(item.data) >= 50) {
                result +=
                  item.seriesName +
                  ": " +
                  '<span class="growth">增长' +
                  item.data +
                  "%</span><br>";
              } else if (parseFloat(item.data) < 50) {
                result +=
                  item.seriesName +
                  ": " +
                  '<span class="reduce">降低' +
                  item.data +
                  "%</span><br>";
              }
            });
            return result;
          },
        },
        legend: {
          data: ["同比", "环比"],
          textStyle: {
            fontSize: 12,
            color: "rgb(0,253,255,0.6)",
          },
          top: "5%",
          right: "5%",
        },
        grid: {
          bottom: 50,
          left: 70,
          right: 50,
        },
        xAxis: {
          axisLine: {
            show: true,
            lineStyle: {
              color: "#15faff",
            },
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            show: true,
          },
          data: [
            "1月",
            "2月",
            "3月",
            "4月",
            "5月",
            "6月",
            "7月",
            "8月",
            "9月",
            "10月",
            "11月",
            "12月",
          ],
        },
        yAxis: {
          max: 100,
          splitNumber: 4,
          interval: 25,
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            lineStyle: {
              type: "dashed",
              color: "#4b4d64",
            },
          },
          axisLabel: {
            formatter: "{value} %",
            textStyle: {
              //改变刻度字体样式
              color: "#ffffff",
            },
          },
        },
        series: [
          {
            name: "环比",
            type: "line",
            // smooth: true,
            symbol: "circle",
            symbolSize: 10,
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(255, 204,1, .9)",
                    },
                    {
                      offset: 0.8,
                      color: "rgba(6, 8, 41,.1)",
                    },
                  ],
                  false
                ),
                shadowColor: "rgba(0, 0, 0, 0.1)",
                shadowBlur: 10,
              },
            },
            itemStyle: {
              normal: {
                color: "#ffcb00",
              },
            },
            data: data1,
          },
          {
            name: "环比",
            type: "lines",
            coordinateSystem: "cartesian2d",
            zlevel: 1,
            smooth: true,
            symbol: "circle",
            effect: {
              show: true,
              smooth: true,
              period: 2,
              symbolSize: 8,
            },
            lineStyle: {
              normal: {
                color: "#ffcb00",
                width: 0,
                opacity: 0,
                curveness: 0,
              },
            },
            data: json.chart0.lowLine,
          },
          {
            name: "同比",
            type: "line",
            // smooth: true,
            symbol: "circle",
            symbolSize: 10,
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(21, 250, 255,.9)",
                    },
                    {
                      offset: 0.8,
                      color: "rgba(6, 8, 41,.1)",
                    },
                  ],
                  false
                ),
                shadowColor: "rgba(0, 0, 0, 0.1)",
                shadowBlur: 10,
              },
            },
            itemStyle: {
              normal: {
                color: "#15faff",
              },
            },
            data: data2,
          },
          {
            name: "同比",
            type: "lines",
            coordinateSystem: "cartesian2d",
            zlevel: 1,
            smooth: true,
            symbol: "circle",
            effect: {
              show: true,
              smooth: true,
              period: 2,
              symbolSize: 8,
            },
            lineStyle: {
              normal: {
                color: "#15faff",
                width: 0,
                opacity: 0,
                curveness: 0,
              },
            },
            data: json2.chart0.lowLine,
          },
        ],
      };
      myCharts.setOption(option);
    },
    zhuzhuang:function(){
         var myCharts = echarts.init(this.$refs.zhuzhuang);
      let data = {
  chart: [
    {
      month: "1月",
      value: 138,
      ratio: 14.89,
    },

    {
      month: "2月",
      value: 114,
      ratio: 79.49,
    },

    {
      month: "3月",
      value: 714,
      ratio: 75.8,
    },

    {
      month: "4月",
      value: 442,
      ratio: 19.8,
    },

    {
      month: "5月",
      value: 622,
      ratio: 44.5,
    },

    {
      month: "6月",
      value: 528,
      ratio: 87.3,
    },
  ],
};

let xAxisMonth = [],
  barData = [],
  lineData = [];
for (let i = 0; i < data.chart.length; i++) {
  xAxisMonth.push(data.chart[i].month);
  barData.push({
    name: xAxisMonth[i],
    value: data.chart[i].value,
  });
  lineData.push({
    name: xAxisMonth[i],
    value: data.chart[i].ratio,
  });
}

var option = {
  backgroundColor: "rgba(2,13,34,.5)",
  title: "",
  grid: {
    top: "24%",
    left: "7%",
    bottom: "6%",
    containLabel: true,
  },
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "none",
    },
    formatter: function (params) {
      return (
        params[0]["data"].name +
        "<br/>" +
        "训练人次: " +
        params[1]["data"].value +
        "<br/>" +
        "合格率: " +
        params[0]["data"].value
      );
    },
  },
  xAxis: [
    {
      type: "category",
      show: true,
      data: ["3月", "4月", "5月", "6月", "7月", "8月"],
      axisLabel: {
        textStyle: {
          color: "#b6b5ab",
        },
      },
    },
    {
      type: "category",
      position: "bottom",
      // data: xAxisMonth,
      boundaryGap: true,
      // offset: 40,
      axisTick: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      axisLabel: {
        textStyle: {
          color: "#b6b5ab",
        },
      },
    },
  ],
  yAxis: [
    {
      show: true,
      splitLine: {
        show: false,
        lineStyle: {
          color: "rgba(255,255,255,0.2)",
        },
      },
      axisLine: {
        show: true,
      },
      axisLabel: {
        show: true,
        color: "#b6b5ab",
      },
    },
  ],
  color: ["#A7F5F9"],
  series: [
    {
      name: "训练人次",
      type: "pictorialBar",
      // xAxisIndex: 1,
      // barWidth: 10,
      symbol: 'path://d="M150 130 L130 50 L170 50 Z"',
      itemStyle: {
        emphasis: {
          opacity: 1,
        },
      },
      data: barData,
    },
    {
      symbol: "circle",
      symbolSize: 16,
      symbolOffset: [0, "-50%"],
      symbolPosition: "end",
      name: "完成率",
      type: "pictorialBar",
      xAxisIndex: 0,
      data: barData,
    },
  ],
};
 myCharts.setOption(option);
    },
    liu:function(){
        var myCharts = echarts.init(this.$refs.liu);
     var option = {
  backgroundColor: "rgba(2,13,34,.6)",
  tooltip: {
    //雷达图的tooltip不会超出div，也可以设置position属性，position定位的tooltip 不会随着鼠标移动而位置变化，不友好
    confine: true,
    enterable: true, //鼠标是否可以移动到tooltip区域内
  },
  radar: {
    name: {
      textStyle: {
        color: "#05D5FF",
        fontSize: 14,
      },
    },
    shape: "polygon",
    center: ["50%", "50%"],
    radius: "80%",
    startAngle: 120,
    scale: true,
    axisLine: {
      lineStyle: {
        color: "rgba(5, 213, 255, .8)",
      },
    },
    splitLine: {
      show: true,
      lineStyle: {
        width: 1,
        color: "rgba(5, 213, 255, .8)", // 设置网格的颜色
      },
    },
    indicator: [
      {
        name: "满庭芳",
        max: 100,
      },
      {
        name: "翠竹园",
        max: 100,
      },
      {
        name: "嘉林景苑",
        max: 100,
      },
      {
        name: "江南摩卡",
        max: 100,
      },
      {
        name: "铂悦府",
        max: 100,
      },
      {
        name: "汤臣一品",
        max: 100,
      },
    ],
    splitArea: {
      show: false,
    },
  },
  grid: {
    position: "center",
  },
  polar: {
    center: ["50%", "50%"], // 默认全局居中
    radius: "0%",
  },
  angleAxis: {
    min: 0,
    interval: 5,
    clockwise: false,
    axisTick: {
      show: false,
    },
    axisLabel: {
      show: false,
    },
    axisLine: {
      show: false,
    },
    splitLine: {
      show: false,
    },
  },
  radiusAxis: {
    min: 0,
    interval: 20,
    splitLine: {
      show: false,
    },
  },
  series: [
    {
      name: "个人雷达图",
      type: "radar",
      symbol: "circle", // 拐点的样式，还可以取值'rect','angle'等
      symbolSize: 10, // 拐点的大小
      itemStyle: {
        normal: {
          color: "#05D5FF",
        },
      },
      areaStyle: {
        normal: {
          color: "#05D5FF",
          opacity: 0.5,
        },
      },
      lineStyle: {
        width: 2,
        color: "#05D5FF",
      },
      label: {
        normal: {
          show: true,
          formatter: (params) => {
            return params.value;
          },
          color: "#fff",
        },
      },
      data: [
        {
          value: [20, 50, 60, 60, 90, 80],
        },
      ],
    },
  ],
};
 myCharts.setOption(option);
    }
  },

  mounted: function () {
    this.PieChart();
    this.Line();
    this.zhuzhuang();
    this.liu()
  },
};
</script>
<style scoped>
#index {
  height: 100%;
  background: url("../assets/images/bg.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0.85;
  position: relative;
}
.box {
  display: flex;
  justify-content: space-between;
}
.active {
  width: 50px;
  height: 50px;
  background: linear-gradient(267deg, #19d4fd 0%, #021b79 100%);
  border-radius: 50%;
  position: absolute;
  top: 105px;
  left: 798px;
  animation: 1.5s linear 0s infinite alternate change;
}
@keyframes change {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(0.1);
  }
}
</style>
